import React from 'react'
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'
import { RiCompassDiscoverFill } from 'react-icons/ri'
import { AiTwotoneLike } from 'react-icons/ai'
const MenuWrapper = styled.ul`
	display: flex;
`
const MenuItem = styled.li.attrs((props) => {
	return props.theme
})`
	text-align: center;
	cursor: pointer;
	display: block;
	margin: 0 10px;
	&:nth-of-type(1) {
		margin: 0;
	}

	a {
		font-size:.3rem;
		display: flex;
		justify-content: center;
		border-radius: 6px;
		align-items: center;
		color: ${(props) => props.headerTextColor};
		vertical-align: middle;
		padding: 20px;
		box-sizing: border-box;
		transition: all 0.3s ease-in;
		svg {
		}
		&:hover,
		&.active {
			background-color: ${(props) => props.activeBackgroundColor};
			color: ${(props) => props.activeTextColorWitchActiveBackgroundColor};
		}

		span {
			vertical-align: middle;
		}
	}
`
export default React.memo(function AppMenu () {
	return (
		<MenuWrapper>
			<MenuItem>
				<NavLink to="/discover">
					<span>发现音乐</span>
				</NavLink>
			</MenuItem>
			<MenuItem>
				<NavLink to="/re">
					<span>推荐</span>
				</NavLink>
			</MenuItem>
		</MenuWrapper>
	)
})
